<script setup>
import { onMounted } from "vue";
import NavBar from "@/components/NavBar/index.vue";

function navigateToHome() {
  uni.navigateBack();
}

function navigateToRecharge() {
  uni.navigateTo({
  	url: "/pages/Me/Recharge/index"
  });
}

</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToHome" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>我的余额</text>
    </div>
		<div class="remain-container">
			<div class="remain-count">
				<text class="title">总余额</text>
				<text class="value">3000元</text>
			</div>
			<button class="recharge-button" @click="navigateToRecharge">
			  前往充值
			</button>
		</div>
  </div>
</template>

<style scoped>
.recharge-button {
	width: 103px;
	height: 47px;
	
	margin-left: 30px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	font-size: 16px;
	color: #fff;
	
	background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
	border: none;
	outline: none;
	border-radius: 10px;
}
.title {
	font-size: 12px;
}
.value {
	font-size: 16px;
	font-weight: 600;
}
.remain-container {
	display: flex;
	width: 100%;
	margin-top: 10px;
	box-sizing: border-box;
}
.remain-count {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
	
	height: 47px;
	padding: 0 15px;
	background-color: #f7fff3;
	border-radius: 10px;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}
</style>
